let navLinks = document.querySelectorAll(".main .link");
let slides = document.querySelectorAll(".main .slides img");
let coverage = document.querySelectorAll(".main .bar");
let maxIndex = navLinks.length;
let cublic = "cubic-bezier(0.77,0,0.175,1)";
slides[0].classList.add("active");
navLinks[0].classList.add("active");
navLinks.forEach((link, current) => {
  coverage[current].style.zIndex =
    "" + (navLinks.length - current);
  link.addEventListener("click", () => {
    navLinks.forEach((link) => {
      return link.classList.remove("active");
    });
    link.classList.add("active");

    let currentSlide = document.querySelector(".main .slides img.active");
    let slidesFadeOut = currentSlide.animate(
      [
        {
          transform: "translateX(0)",
          opacity: 1,
        },
        {
          transform: "translateX(5%)",
          opacity: 0,
        },
      ],
      {
        duration: 600,
        easing: "ease-in",
        fill: "forwards",
      }
    );

    slidesFadeOut.onfinish = () => {
      slides.forEach((slide) => {
        return slide.classList.remove("active");
      });
      let activeSlide = slides[current];
      activeSlide.classList.add("active");
      activeSlide.animate(
        [
          {
            transform: "translateX(-5%)",
            opacity: 0,
          },
          {
            transform: "translateX(0)",
            opacity: 1,
          },
        ],
        {
          duration: 600,
          easing: "ease-out",
          fill: "forwards",
        }
      );
    };
    maxIndex += 1;
    let activeOverlay = coverage[current];
    activeOverlay.style.zIndex = "" + maxIndex;
    activeOverlay.animate(
      [
        {
          transform: "scaleX(0)",
        },
        {
          transform: "scaleX(1)",
        },
      ],
      {
        duration: 1200,
        easing: cublic,
        fill: "forwards",
      }
    );
  });
});
